<template>
  <div class="app-container">
    <div class="filter_container">
      <el-form :inline="true" :model="refundFrom" class="demo-form-inline">
        <el-form-item label="退款状态">
          <el-select
            ref="whetherRefundRef"
            v-model="refundFrom.whetherRefund"
            clearable
            placeholder="退款状态"
            size="small"
            style="width: 120px"
            @visible-change="getstatusList"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in statusSelection"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道类别">
          <el-select
            v-model="channelTypeidName"
            clearable
            placeholder="渠道类别"
            size="small"
            style="width: 120px"
            @visible-change="getchannelListType"
            @change="handleChannelTypeId"
            ref="channelTypeidNameRef"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in channelTypellist"
              :key="item.id"
              :label="item.channelName"
              :value="{label:item.id,value:item.channelKey,name:item.channelName}"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select
            v-model="refundFrom.channelId"
            filterable
            clearable
            placeholder="渠道"
            size="small"
            style="width: 120px"
            @visible-change="getchannelList"
            ref="channelNameRef"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in channelList"
              :key="item.channelKey"
              :label="item.channelName"
              :value="item.channelKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="后台单号">
          <el-input v-model.trim="refundFrom.xmbzNo" size="small" clearable placeholder="请输入后台单号"></el-input>
        </el-form-item>
        <el-form-item label="平台单号">
          <el-input
            v-model.trim="refundFrom.platformNo"
            size="small"
            clearable
            placeholder="请输入平台单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model.trim="refundFrom.operator" size="small" clearable placeholder="请输入操作人"></el-input>
        </el-form-item>
        <el-form-item label="创建退款时间">
          <!--    <el-date-picker v-model="Launchdate" type="datetimerange"  size="small" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :clearable='false'>
          </el-date-picker>-->
          <el-date-picker
            size="small"
            v-model="Launchdate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            :clearable="false"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="退款等级">
          <el-select
            v-model="refundFrom.refundGrade"
            clearable
            placeholder="退款等级"
            size="small"
            style="width: 120px"
            @visible-change="refundGradeList"
            ref="refundGradeNameRef"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in GradeList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            @click="handleFilterRefund(Launchdate)"
            size="small"
            icon="el-icon-search"
          >查询</el-button>
          <el-button
            type="success"
            plain
            @click="handleAddRefund"
            size="small"
            icon="el-icon-circle-plus-outline"
          >新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="refund">
      <div class="refundmain" ref="refundmain">
        <div
          class="refund_list"
          v-for="(item,index) in refundList"
          :key="index"
          @click.stop="handleRefund(item,index,'refundFromEdit')"
        >
          <div class="credittype yb" v-if="item.refundGrade=='1'">
            <span class="tips">{{item.refundGradeName}}</span>
          </div>
          <div class="credittype zd" v-if="item.refundGrade=='2'">
            <span class="tips">{{item.refundGradeName}}</span>
          </div>
          <div class="credittype jj" v-if="item.refundGrade=='3'">
            <span class="tips">{{item.refundGradeName}}</span>
          </div>
          <div class="credittype warning" v-if="item.refundGrade=='4'">
            <span class="tips">{{item.refundGradeName}}</span>
          </div>
          <img :src="checked" alt="" v-if="refundlistindex == index" class="imgurl">
          <div class="order-num">
            <span>后台单号：{{item.xmbzNo}}</span>
            <i></i>
          </div>
          <!-- refundNotReturn -->
          <em class="grade" style="margin-right: 5px;">{{item.whetherRefundName}}</em>
          <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
          <div class="line">
            <p style="display: block;">
              <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
              <span>{{item.goodsName}}~{{item.orderDetailId}}</span>
            </p>
            <div v-if="item.suborderList&&item.suborderList.length>0">
              <p style="display: block;" v-for="(item,index) in item.suborderList" :key="index">
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>

                <span>{{item.goodsName}}~{{item.orderDetailId}} <em style='color:#ff0000'>(子单)</em></span>
              </p>
            </div>
            <div style="display: flex;">
              <p style="margin-right: 30px;">
                <em>创建工单时间：</em>
                {{item.createTime}}
              </p>
              <p>
                <em>平台单号：</em>
                {{item.platformNo}}
              </p>
            </div>
            <p>
              <em>审核不过原因：</em>
              {{item.notPassReason}}
            </p>
            <p>
              <em>结案时间：</em>
              {{item.refundTime}}
            </p>
            <p>
              <em>平台+门店：</em>
              {{item.store}}
            </p>
            <p style="display: flex;">
              <em>申请原因：</em>
              <span
                style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
              >{{item.applyReason}}</span>
            </p>
          </div>
          <div class="refund_lists">
            <div class="line">
              <p>
                <em>申请人：</em>
                {{item.refundApplyPeople}}
              </p>
              <p>
                <em>是否生产：</em>
                <span v-if="item.isProduction==1">是</span>
                <span v-else>否</span>
              </p>
              <!-- <p>
               <em>创建工单时间：</em>
               {{item.remindersTime}}
              </p>-->
              <p>
                <em>蛋糕去向：</em>
                {{item.cakeWhereaboutsName}}
              </p>
              <!-- <p>
               <em>退款方式：</em>
               {{item.city}}
              </p>-->
              <!--  <p>
               <em>全额退款：</em>
               <span v-if="item.fullRefund==1">是</span>
               <span v-else>否</span>
              </p>-->

              <p>
                <em>退款金额：</em>
                {{item.refundMoney}}
              </p>
              <p>
                <em>退款方式：</em>
                <span>{{item.refundModeName}}</span>
              </p>
              <!-- <p>
                <em>退款二维码：</em>
                <img :src="item.refundCode" alt="" class="refundCode">
              </p>-->
              <p>
                <em>退款等级：</em>
                {{item.refundGradeName}}
              </p>
              <p>
                <em>退款来源：</em>
                {{item.refundSourceName}}
              </p>
            </div>
            <div class="line">
              <p>
                <em>渠道类型：</em>
                {{item.channelTypeName}}
              </p>
              <p>
                <em>渠道：</em>
                {{item.channelName}}
              </p>
              <p>
                <em>退款原因：</em>
                {{item.refundReasonName}}
              </p>
              <p>
                <em>退款类型：</em>
                {{item.refundTypeName}}
              </p>
              <p>
                <em>审核状态：</em>
                <span>{{item.approvalPassName}}</span>
              </p>
            </div>
            <div class="line">
              <p>
                <em>蛋糕营销金额:</em>
                {{item.goodsPrice/100}}
              </p>
              <p>
                <em>蛋糕金额:</em>
                {{item.cakeCompensatePrice}}
              </p>
              <p>
                <em>诚意金：</em>
                {{item.sincerityGold}}
              </p>
              <p>
                <em>赠送蛋糕金额：</em>
                {{item.giveCakePrice}}
              </p>
              <p>
                <em>赠送礼品金额：</em>
                {{item.giveGiftPrice}}
              </p>
              <!-- <p>
                <em>赔偿总金额</em>
                {{item.refundMoney}}
              </p>-->
            </div>
          </div>
        </div>
        <div class="refund_list" v-if="refundList.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="refundFrom.page"
          :limit.sync="refundFrom.size"
          @pagination="getWorkOrderList"
        />
      </div>
      <div class="refund_con" v-if="refundStatus=='update'">
        <el-form
          ref="refundFromEdit"
          :model="refundFromEdit"
          :rules="refundFromEditrules"
          label-width="120px"
        >
          <el-form-item label="后台单号">
            <span v-if="refundFromEdit.xmbzNo">{{refundFromEdit.xmbzNo}}</span>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="平台单号">
            <span v-if="refundFromEdit.platformNo">{{refundFromEdit.platformNo}}</span>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="是否生产">
            <span v-if="refundFromEdit.isProduction==1">是</span>
            <span v-else>否</span>
          </el-form-item>
          <el-form-item label="渠道类别">
            <span v-if="refundFromEdit.channelTypeName">{{refundFromEdit.channelTypeName}}</span>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="渠道">
            <span v-if="refundFromEdit.channelName">{{refundFromEdit.channelName}}</span>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="退款原因">
            <el-select
              v-model="refundReasonNames"
              v-if="refundStatushow=='update'"
              size="small"
              placeholder="请选择退款原因"
              @change="handlerefundReason"
            >
              <el-option
                :label="item.dictValue"
                :value="{label:item.dictValue,value:item.dictKey}"
                v-for="(item,index) in ReasonList"
                :key="index"
              ></el-option>
            </el-select>
            <span v-else>{{refundFromEdit.refundReasonName}}</span>
          </el-form-item>
          <el-form-item label="退款类型">
            <el-select
              v-model="refundTypeNames"
              v-if="refundStatushow=='update'"
              size="small"
              placeholder="请选择退款类型"
              @change="handlerefundType"
            >
              <el-option
                :label="item.dictValue"
                :value="{label:item.dictValue,value:item.dictKey}"
                v-for="(item,index) in RefundTypeList"
                :key="index"
              ></el-option>
            </el-select>
            <span v-else>{{refundFromEdit.refundTypeName}}</span>
          </el-form-item>
          <el-form-item label="蛋糕去向">
            <el-select
              v-model="cakeWhereNames"
              v-if="refundStatushow=='update'"
              size="small"
              placeholder="请选择蛋糕去向"
              @visible-change="cakeWhere"
              @change="handleCakeWhere"
            >
              <el-option
                :label="item.dictValue"
                :value="{label:item.dictValue,value:item.dictKey}"
                v-for="item in cakewherelist"
                :key="item.dictKey"
              ></el-option>
            </el-select>
            <span v-else>{{refundFromEdit.cakeWhereaboutsName}}</span>
          </el-form-item>
          <el-form-item label="退款等级">
            <el-select
              v-model="refundGradeNames"
              size="small"
              placeholder="请选择退款等级"
              v-if="refundStatushow=='update'"
              @visible-change="refundGradeList"
              @change="handlerefundGrade"
            >
              <el-option
                :label="item.dictValue"
                :value="{label:item.dictValue,value:item.dictKey}"
                v-for="(item,index) in GradeList"
                :key="index"
              ></el-option>
            </el-select>
            <span v-if="refundStatushow=='create'">{{refundFromEdit.refundGradeName}}</span>
          </el-form-item>
          <!-- <el-form-item label="退款方式">
            <span v-if="refundStatushow=='create'">{{refundFromEdit.refundModeName}}</span>
            <el-radio-group v-model="refundFromEdit.refundMode" v-else>
              <el-radio v-for="(item,index) in RefundModeList" :key="index" :label="item.dictKey">
                {{ item.dictValue }}
              </el-radio>
            </el-radio-group>
          </el-form-item>-->

          <el-form-item label="退款金额：">
            <el-input
              v-if="refundStatushow=='update'"
              v-model.trim="refundFromEdit.refundMoney"
              class="inputType"
              size="small"
              style="width:200px"
              onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
              onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
            ></el-input>
            <span v-if="refundStatushow=='create'">{{refundFromEdit.refundMoney}}</span>
          </el-form-item>
          <div v-if="refundStatushow=='update'">
            <div class="compensationMethods">
              <el-radio-group v-model="refundFromEdit.compensationMethod">
                <el-radio :label="item.dictKey" v-for='item in compensationList'   :key="item.dictKey" @change="headlecompensationMethod(item.dictKey,refundFromEdit.goodsPrice/100)"
                  style="margin-bottom: 20px;">
                  <span> {{item.dictValue}}</span>
                </el-radio>
              </el-radio-group>
              <el-form-item label="赔偿金额" label-width="80px">
                <span v-if="refundStatushow=='update'">
                  <span>
                    <el-input
                      v-model.trim="cakeCompensatePrice"
                      class="inputType"
                      size="small"
                      style="width:100px"
                      onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                      onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                    ></el-input>
                  </span>
                </span>
                <span
                  v-if="refundStatushow=='create'"
                >{{cakeCompensatePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
              </el-form-item>
              <el-form-item label="诚意金" label-width="80px">
                <span v-if="refundStatushow=='update'">
                  <el-input
                    v-model.trim="refundFromEdit.sincerityGold"
                    class="inputType"
                    size="small"
                    style="width:100px"
                    onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                    onaffterpaste="value=value.replace/[^\-?\d.]/g,'')"
                  ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                </span>
                <span
                  v-if="refundStatushow=='create'"
                >{{refundFromEdit.sincerityGold||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
              </el-form-item>
              <el-form-item label="赠送蛋糕" label-width="80px">
                <span v-if="refundStatushow=='update'">
                  <el-input
                    v-model.trim="refundFromEdit.giveCakePrice"
                    class="inputType"
                    size="small"
                    style="width:100px"
                    onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                    onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                  ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                </span>
                <span
                  v-if="refundStatushow=='create'"
                >{{refundFromEdit.giveCakePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
              </el-form-item>
              <el-form-item label="赠送礼品" label-width="80px">
                <span v-if="refundStatushow=='update'">
                  <el-input
                    v-model.trim="refundFromEdit.giveGiftPrice"
                    class="inputType"
                    size="small"
                    style="width:100px"
                    onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                    onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                  ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                </span>
                <span
                  v-if="refundStatushow=='create'"
                >{{refundFromEdit.giveGiftPrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="申请原因">
            <el-input
              v-model.trim="refundFromEdit.applyReason"
              type="textarea"
              v-if="refundStatushow=='update'"
              size="small"
              maxlength="50"
              show-word-limit
              :autosize="{ minRows: 4, maxRows:6}"
            ></el-input>
            <span v-else>{{refundFromEdit.applyReason}}</span>
          </el-form-item>
          <el-form-item label="门店">
            <el-input
              v-model.trim="refundFromEdit.store"
              v-if="refundStatushow=='update'"
              size="small"
              type="textarea"
              maxlength="20"
              show-word-limit
              :autosize="{ minRows: 4, maxRows:6}"
            ></el-input>
            <span v-else>{{refundFromEdit.store}}</span>
          </el-form-item>
          <el-form-item label="退款二维码" v-if="refundStatushow=='update'">
            <el-upload
              class="avatar-uploader"
              action="/api/xmbz-goods/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccessupdate"
              :before-upload="beforeAvatarUploadupdate"
            >
              <img v-if="refundFromEdit.refundCode" :src="refundFromEdit.refundCode" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="退款二维码" v-if="refundStatushow=='create'">
            <img
              :src="refundFromEdit.refundCode"
              class="avatar"
              @click="handlePictureCardPreview(refundFromEdit.refundCode)"
              v-if="refundFromEdit.refundCode"
            >
            <img :src="refundFromEdit.refundCode" class="avatar" v-else>
          </el-form-item>
          <div class="buttontips">
            <el-button
              type="primary"
              size="small"
              plain
              @click="handlerEditRefund(refundFromEdit)"
              v-if="EditRefundShow"
            >编辑</el-button>
            <el-button
              type="info"
              size="small"
              plain
              @click="handlerLogrefund(refundFromEdit)"
              v-show="EditRefundOther"
            >日志</el-button>
            <el-button
              type="success"
              size="small"
              plain
              @click="handlerApproved(refundFromEdit)"
              v-show="EditRefundOther"
              v-if="refundFromEdit.whetherRefund=='2'"
            >点击标记已退款</el-button>
            <el-button
              type="info"
              size="small"
              plain
              @click="handleFinance(refundFromEdit)"
              v-show="EditRefundOther"
              v-if="refundFromEdit.whetherRefund=='2'"
            >财务驳回</el-button>
          </div>
          <div class="buttontips">
            <el-button
              type="warning"
              size="small"
              plain
              @click="handlerRefundCancel(refundFromEdit,'refundFromEdit')"
              v-if="EditRefundeditShow"
            >取消</el-button>
            <el-button
              type="success"
              size="small"
              plain
              @click="handlerSaveRefund(refundFromEdit,'refundFromEdit')"
              v-if="EditRefundeditShow"
            >保存</el-button>
          </div>
        </el-form>
      </div>
      <div class="refund_con Nodata" v-else>请选择订单</div>
    </div>
    <!-- 添加退款 -->
    <el-dialog
      title="添加退款"
      :visible.sync="refundVisible"
      width="35%"
      class="refundsmain"
      :destroy-on-close="false"
      :show-close="false"
       :before-close="handleCloserefunds"
    >
      <el-form
        :model="refundAdd"
        :rules="refundrules"
        ref="refundAdd"
        label-width="130px"
        @click.stop
      >
        <el-form-item label="后台单号" prop="xmbzNo">
          <el-input
            v-model.trim="refundAdd.xmbzNo"
            size="small"
            style="width:200px;margin-right: 5px;"
            onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
            onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
            @change="searchGood(refundAdd.xmbzNo)"
          ></el-input>
          <el-button
            type="primary"
            size="small"
            plain
            icon="el-icon-search"
            @click="searchGood(refundAdd.xmbzNo)"
          >搜索</el-button>
        </el-form-item>
        <div v-if="issearchData">
          <el-form-item label="退款蛋糕" v-if="refundCakeFlag">
            <el-checkbox-group v-model="orderDetailIds" size="mini" @change="getTotalprice">
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '蛋糕'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                v-if="item.refundIdentification==''"
              >{{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})</el-checkbox>
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '蛋糕'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                disabled
                v-if="item.refundIdentification"
              >
                {{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})
                <el-tag
                  type="danger"
                  size="small"
                  v-if="item.refundIdentification"
                >{{item.refundIdentification}}</el-tag>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="定制蛋糕" v-if="customCakeFlag">
            <el-checkbox-group v-model="orderDetailIds" @change="getTotalprice">
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '定制蛋糕'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                v-if="item.refundIdentification==''"
              >{{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})</el-checkbox>
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '定制蛋糕'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                disabled
                v-if="item.refundIdentification"
              >
                {{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})
                <el-tag type="danger" size="small">{{item.refundIdentification}}</el-tag>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="配件" v-if="partsFlag">
            <el-checkbox-group v-model="orderDetailIds" @change="getTotalprice">
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '配件'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                v-if="item.refundIdentification==''"
              >{{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})</el-checkbox>
              <el-checkbox
                v-for="(item,index) in shoplist"
                v-show="item.categoryName == '配件'"
                :key="index"
                :label="item.id"
                :value="item.id"
                name="type"
                style="word-break: break-all;word-wrap:break-word;white-space: inherit;"
                disabled
                v-if="item.refundIdentification"
              >
                {{ item.goodsName }}(规格：{{ item.goodsSpecs }},价格：{{ (item.totalPrice/100).toFixed(2) }})
                <el-tag type="danger" size="small">{{item.refundIdentification}}</el-tag>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <!-- <el-form-item label="平台单号" prop="platformNo">
          <el-input v-model.trim="refundAdd.platformNo" size="small" style="width:200px" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
            onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"></el-input>
        </el-form-item>-->
        <el-form-item label="是否生产" prop="isProduction">
          <el-select v-model="refundAdd.isProduction" placeholder="请选择是否生产" size="small">
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="(item,index) in IsProductionList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款等级" prop="refundGrade">
          <el-select
            v-model="refundGradeName"
            size="small"
            placeholder="请选择退款等级"
            @change="handleRefundGradeAdd"
          >
            <el-option
              :label="item.dictValue"
              :value="{label:item.dictValue,value:item.dictKey}"
              v-for="(item,index) in GradeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款原因" prop="refundReason">
          <el-select
            v-model="refundAdd.refundReason"
            placeholder="请选择退款原因"
            size="small"
            @change="onChangeStripe"
          >
            <el-option
              :key="index"
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="(item,index) in ReasonList"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款类型" prop="refundType">
          <el-select v-model="refundAdd.refundType" placeholder="请选择退款类型" size="small">
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="(item,index) in RefundTypeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="蛋糕去向" prop="cakeWhereabouts">
          <el-select
            v-model="refundAdd.cakeWhereabouts"
            size="small"
            placeholder="请选择蛋糕去向"
            @visible-change="cakeWhere"
            @change="handleCakeWhere"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in cakewherelist"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道类别" prop="channeltype">
          <el-select
            v-model="refundAdd.channeltype"
            clearable
            placeholder="请选择渠道类别"
            size="small"
            @visible-change="getchannelListaddType"
            @change="handleChannelTypeIds"
          >
            <el-option
              v-for="item in channelTypellist"
              :key="item.id"
              :label="item.channelName"
              :value="{label:item.id,value:item.channelKey,name:item.channelName}"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道" prop="channel">
          <el-select
            v-model="refundAdd.channel"
            clearable
            placeholder="请选择渠道"
            size="small"
            @visible-change="getchannelListAdd"
          >
            <el-option
              v-for="item in channelList"
              :key="item.channelKey"
              :label="item.channelName"
              :value="item.channelKey"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="退款方式:" prop="refundMode">
          <el-radio-group v-model="refundAdd.refundMode">
            <el-radio v-for="(item,index) in RefundModeList" :key="index" :label="item.dictKey">
              {{ item.dictValue }}
            </el-radio>
          </el-radio-group>
        </el-form-item>-->
        <el-form-item label="退款金额：" prop="refundMoney">
          <el-input
            v-model.trim="refundAdd.refundMoney"
            class="inputType"
            size="small"
            style="width:200px"
            onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
            onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <div>
          <div class="compensationMethods">
            <el-radio-group v-model.trim="refundAdd.compensationMethod" prop="compensationMethod">
              <el-radio
                :label="item.dictKey"
                v-for="item in compensationList"
                @change="headleAddMethod(item.dictKey,refundAdd.refundMoney)"
                style="margin-bottom: 20px;"
              >
                <span>{{item.dictValue}}</span>
              </el-radio>
            </el-radio-group>
            <el-form-item label="赔偿金额" label-width="80px">
              <el-input
                v-model.trim="cakeCompensatePriceAdd"
                class="inputType"
                size="small"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
              ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
            </el-form-item>
            <el-form-item label="诚意金" label-width="80px">
              <el-input
                v-model.trim="refundAdd.sincerityGold"
                class="inputType"
                size="small"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
              ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
            </el-form-item>
            <el-form-item label="赠送蛋糕" label-width="80px">
              <el-input
                v-model.trim="refundAdd.giveCakePrice"
                class="inputType"
                size="small"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
              ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
              <span
                v-if="refundStatushow=='create'"
              >{{refundAdd.giveCakePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
            </el-form-item>
            <el-form-item label="赠送礼品" label-width="80px">
              <el-input
                v-model.trim="refundAdd.giveGiftPrice"
                class="inputType"
                size="small"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
              ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
            </el-form-item>
          </div>
        </div>
        <el-form-item label="申请原因" prop="applyReason">
          <el-input
            v-model.trim="refundAdd.applyReason"
            type="textarea"
            size="small"
            style="width:200px"
            maxlength="50"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="门店" prop="store">
          <el-input
            v-model.trim="refundAdd.store"
            type="textarea"
            size="small"
            style="width:200px"
            maxlength="30"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="退款二维码">
          <el-upload
            class="avatar-uploader"
            action="/api/xmbz-goods/file/upload"
            :data="{tag:'refund'}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="refundAdd.refundCode" :src="refundAdd.refundCode" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleRefundsubmit(refundAdd,'refundAdd')"
          >添加</el-button>
          <el-button @click="handlerefundResetForm(refundAdd,'refundAdd')" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 退款日志 -->
    <el-dialog title="日志" :visible.sync="LogFormVisible" width="width:400px">
      <div class="radio">显示方式：
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in LogList"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.createTime"
        >
          <h5>{{activity.operator}}</h5>
          <p v-html="activity.action">{{activity.action}}</p>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {
  //接口
  CompensationMethod,
  FullRefundList,
  RefundGradeList,
  RefundReasonList,
  RefundTypeList,
  AddRefund,
  IsProductionList,
  CakeWhereaboutsList,
  signWorkOrderRefund, //标记已退款
  OrderOperateLog, // 日志
  WorkOrderRefundPage,
  // getOrderChannelList, //渠道
  getFinancialRejection, //  财务驳回
  getWhetherRefundList, //退款状态列表
  updateWorkOrderRefund, //退款编辑
  getRefundModeList, //退款方式
  // getApprovalList
  // ResponsibleDepartmentList,
  // orderlogs
  getGoodsByxmbzNo
} from "@/api/workorder";
import {
  getOrderChannelList, //渠道
  getOrderChannelTypeList //渠道类别
} from "@/api/createOrder";
import checked from "@/assets/image/checked.png";
import Pagination from "@/components/Pagination"; // 分页
// import { log } from "util";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      checked,
      reverse: false,
      total: 0,
      refundVisible: false,
      LogFormVisible: false,
      refundupdate: {
        refundCode: "" //退款二维码
      },
      refundAdd: {
        xmbzNo: "", //后台单号
        orderDetailIds: [], //订单明细id的集合
        platformNo: "", //第三方
        channeltype: "",
        channel: "",
        isProduction: "", //是否生产 1:是 2:否
        cakeWhereabouts: "", // 蛋糕去向 1:生产中 2:在分仓 3:配送中 4:其他
        refundGrade: "", //退款等级 1:一般 2:中等 3:紧急 4:非常紧急
        refundReason: "", //退款原因 1:客户原因 2:公司原因 3:配送部原因 4:客服部原因 5:生产部原因 6:运营中心原因
        refundType: "", //退款类型
        refundMode: 1, // 退款方式
        refundMoney: "", //退款金额
        compensationMethod: "", //赔偿方式 99:无 1:免单 2:免半单
        sincerityGold: "", // 诚意金
        giveCakePrice: "", //赠送的礼品价格
        applyReason: "", //申请原因
        store: "", //平台门店
        refundCode: "", //退款二维码
        approvalPass: 2 //审批是否通过  0:否 1:是
      },
      refundrules: {
        xmbzNo: [
          {
            required: true,
            message: "后台单号为空",
            trigger: "change"
          }
        ],
        platformNo: [
          {
            required: true,
            message: "平台单号为空",
            trigger: "change"
          }
        ],
        refundReason: [
          {
            required: true,
            message: "请选择退款原因",
            trigger: "change"
          }
        ],
        channeltype: [
          {
            required: true,
            message: "请选择渠道类别",
            trigger: "change"
          }
        ],
        channel: [
          {
            required: true,
            message: "请选择渠道",
            trigger: "change"
          }
        ],
        isProduction: [
          {
            required: true,
            message: "请选择是否生产",
            trigger: "blur"
          }
        ],
        cakeWhereabouts: [
          {
            required: true,
            message: "请选择蛋糕去向",
            trigger: "change"
          }
        ],
        refundType: [
          {
            required: true,
            message: "请输入退款类型",
            trigger: "change"
          }
        ],
        refundMode: [
          {
            required: true,
            message: "请选择退款方式",
            trigger: "change"
          }
        ],
        refundGrade: [
          {
            required: true,
            message: "请输入退款等级",
            trigger: "change"
          }
        ],
        fullRefund: [
          {
            required: true,
            message: "请选择全额退款",
            trigger: "change"
          }
        ],
        refundMoney: [
          {
            required: true,
            message: "金额不能为空",
            trigger: "change"
          }
        ],
        sincerityGold: [
          {
            required: true,
            message: "金额不能为空",
            trigger: "change"
          }
        ],
        applyReason: [
          {
            required: true,
            message: "请输入申请原因",
            trigger: "change",
            max: 200
          }
        ],
        compensationMethod: [
          {
            required: true,
            message: "请至少选择一个赔偿方式",
            trigger: "change"
          }
        ],
        store: [
          {
            required: true,
            message: "请输入平台门店",
            trigger: "change"
          }
        ]
        // refundCode: [{
        //   required: true,
        //   message: "请上传二维码",
        //   trigger: "change"
        // }]
      },
      refundFromEditrules: {
        applyReason: [
          {
            required: true,
            message: "申请原因必填",
            trigger: "blur"
          }
        ],
        store: [
          {
            required: true,
            message: "门店必填",
            trigger: "blur"
          }
        ],
        refundMoney: [
          {
            required: true,
            message: "退款金额必填",
            trigger: "blur"
          }
        ]
        // refundCode: [{
        //   required: true,
        //   message: "请上传二维码",
        //   trigger: "change"
        // }]
      },

      refundFrom: {
        xmbzNo: "", //后台单号
        operator: "", //操作人
        platformNo: "", //平台单号
        // workOrderStartTime: "", //开始时间
        // workOrderEndTime: "", //结束时间
        approvalPass: 2, //审批是否通过  0:否 1:是
        whetherRefund: "", //退款状态 1:已退款 2:未退款
        refundGrade: "", //退款等级 1:一般 2:中等 3:紧急 4:非常紧急
        channelId: "", // 渠道
        channelTypeId: "", //渠道列表
        page: 1, //页码
        size: 10, //每页页码
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString() //配送结束时间
      },
      Launchdate: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59")
          .toString()
      ],
      imageUrl: "",
      refundlistindex: "-1",
      refundStatushow: "",
      refundFromEdit: [],
      LogList: [
        //日志表
      ],
      cakeCompensatePrice: "",
      refundFromShow: {},
      refundStatus: "",
      citySelection: [],
      refundSelection: [],
      statusSelection: [], //退款 状态
      channelSelection: [], //渠道
      channelTypellist: [], //渠道类别
      urgentSelection: [], // 紧急状态
      compensationList: [], //赔偿方式
      departmentList: [],
      refundList: [],
      fullrefund: [], // 全额退款
      GradeList: [], // 退款等级
      ReasonList: [], //退款原因
      RefundTypeList: [], //退款类型
      IsProductionList: [], //是否生产
      cakewherelist: [], //蛋糕去向
      channelList: [], // 渠道
      methodNameList: [], //
      RefundModeList: [], //退款方式
      cakeCompensatePriceAdd: "",
      EditRefundShow: true, //编辑按钮显示
      EditRefundeditShow: false, //取消和保存按钮
      EditRefundOther: true,
      // 图片
      dialogImageUrl: "",
      dialogVisible: false,

      // 退款下拉数据
      refundReasonIds: "", //退款原因id
      refundReasonNames: "",
      refundTypeIds: "", //退款类型ID
      refundTypeNames: "",
      refundGradeIds: "", //退款等级ID
      refundGradeNames: "",
      cakeWhereIds: "", //蛋糕去向ID
      cakeWhereNames: "",
      channelTypeidName: "", //
      channelTypeidIds: "",
      channelTypeidTypes: "",
      AddchanneltypeName: "",
      AddchannelTypeidIds: "",
      AddchannelTypeidTypes: "",
      shoplist: [], //选择蛋糕列表
      cakeCompensatePrice: "",
      refundCakeFlag: false, //退款蛋糕
      customCakeFlag: false, // 定制蛋糕
      partsFlag: false, // 配件
      refundRadioFlag: true, // 退款金额标记
      payforRadioFlag: false, // 赔偿方式中赔偿的标记
      compensationMethodFlag: false, // 赔偿方式标记
      refundCakePrice: "", // 所选中的退款蛋糕的总价
      orderDetailIds: [], //
      issearchData: false, // 是否有搜索的数据
      refundGradeName: ""
    };
  },
  watch: {
    refundVisible() {
      if (this.refundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    LogFormVisible() {
      if (this.LogFormVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    dialogVisible() {
      if (this.dialogVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    EditRefundeditShow() {
      if (this.EditRefundeditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    }
  },
  mounted() {
    this.getWorkOrderList();
    this.CompensationMethodList();
    this.fullRefundList();
    // this.refundGradeList();
    this.refundReasonList();
    this.isProductionList();
    // this.cakeWhere();
    // this.getchannelList();
    // this.getstatusList();
    this.getRefundModeLists();
    window.addEventListener("keydown", this.keyupEnter);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },

  methods: {
    // 选择框回车失焦
    selectBlur(e) {
      if (e.keyCode == 13) {
        this.$refs["whetherRefundRef"].blur();
        this.$refs["channelTypeidNameRef"].blur();
        this.$refs["channelNameRef"].blur();
        this.$refs["refundGradeNameRef"].blur();
        e.returnValue = false;
      }
    },
    keyupEnter() {
      if (window.event.keyCode == 13) {
        this.handleFilterRefund(this.Launchdate); // 查询事件
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },
    getRefundModeLists() {
      getRefundModeList().then(res => {
        this.RefundModeList = res.data.data;
      });
    },
    getWorkOrderList() {
      this.refundFrom.channelTypeId = this.channelTypeidTypes;
      (this.refundFrom.workOrderStartTime = this.dayjs(
        this.refundFrom.workOrderStartTime
      )
        .format("YYYY-MM-DD HH:mm:00")
        .toString()), //配送开始时间
        (this.refundFrom.workOrderEndTime = this.dayjs(
          this.refundFrom.workOrderEndTime
        )
          .format("YYYY-MM-DD HH:mm:59")
          .toString()), //配送结束时间
        WorkOrderRefundPage(this.refundFrom).then(response => {
          this.refundList = response.data.data.rows;
          this.total = response.data.data.total;
        });
      this.$refs.refundmain.scrollTop = 0;
      this.EditRefundeditShow = false;
      this.EditRefundOther = true;
      this.refundlistindex = "-1";
      this.refundStatus = "create";
    },
    // 公共部分-------------------------------------------------
    // RefundstatusList
    getstatusList() {
      getWhetherRefundList("").then(response => {
        this.statusSelection = response.data.data;
      });
    },
    getchannelList() {
      //渠道
      if (this.channelTypeidName == "") {
        this.$message({
          type: "warning",
          message: "请先选择渠道类别!"
        });
        return false;
      } else {
        getOrderChannelList({
          parentId: this.channelTypeidIds
        }).then(response => {
          this.channelList = response.data.data;
        });
      }
    },
    handleChannelTypeId(data) {
      if (data) {
        this.channelTypeidIds = data.label;
        this.channelTypeidTypes = data.value;
        this.channelTypeidName = data.name;
      } else {
        this.refundFrom.channelTypeId = "";
      }
    },

    handleChannelTypeIds(data) {
      if (data) {
        this.AddchannelTypeidIds = data.label;
        this.AddchannelTypeidTypes = data.value;
        this.refundAdd.channeltype = data.name;
      } else {
        this.refundAdd.channel = "";
        this.channelList = [];
      }
    },
    getchannelListAdd() {
      //渠道
      if (
        this.refundAdd.channeltype == "" ||
        this.refundAdd.channeltype == null
      ) {
        this.$message({
          type: "warning",
          message: "请先选择渠道类别!"
        });
        return false;
      } else {
        getOrderChannelList({
          parentId: this.AddchannelTypeidIds
        }).then(response => {
          this.channelList = response.data.data;
        });
      }
    },
    getchannelListType() {
      //  渠道类别
      getOrderChannelTypeList().then(res => {
        this.channelTypellist = res.data.data;
      });
      this.refundFrom.channelId = "";
    },
    getchannelListaddType() {
      //  渠道类别
      getOrderChannelTypeList().then(res => {
        this.channelTypellist = res.data.data;
      });
      this.refundAdd.channelId = "";
    },

    CompensationMethodList() {
      // ****备款状态
      CompensationMethod("").then(response => {
        this.compensationList = response.data.data;
      });
    },
    fullRefundList() {
      // ****全额退款
      FullRefundList("").then(response => {
        this.fullrefund = response.data.data;
      });
    },

    refundGradeList() {
      // 退款等级
      RefundGradeList("").then(response => {
        this.GradeList = response.data.data;
      });
    },
    refundGradeListAdd() {
      RefundGradeList("").then(response => {
        this.GradeList = response.data.data;
        this.refundGradeName = response.data.data[0].dictValue;
        this.refundAdd.refundGrade = response.data.data[0].dictKey;
      });
    },
    handlerefundGrade(data) {
      this.refundGradeIds = data.value;
    },
    handleRefundGradeAdd(data) {
      this.refundGradeIds = data.value;
      this.refundGradeName = data.label;
      this.refundAdd.refundGrade = data.value;
    },
    refundReasonList() {
      // 退款原因：
      RefundReasonList("").then(response => {
        this.ReasonList = response.data.data;
      });
    },
    selected(item) {
      RefundTypeList({
        name: item
      }).then(response => {
        this.RefundTypeList = response.data.data;
      });
    },
    handlerefundReason(item) {
      if (item) {
        this.refundReasonIds = item.value;
        this.refundFromEdit.refundType = "";
        this.refundTypeNames = "";
        RefundTypeList({
          name: item.label
        }).then(response => {
          this.RefundTypeList = response.data.data;
        });
      } else {
        this.$message({
          type: "warning",
          message: "请先选择退款原因!"
        });
        return false;
      }
    },
    handlerefundType(data) {
      if (data) {
        this.$message({
          type: "warning",
          message: "请先选择退款类型!"
        });
        return false;
      } else {
        this.refundTypeIds = data.value;
      }
    },

    handleCakeWhere(data) {
      this.cakeWhereIds = data.value;
    },

    onChangeStripe(val) {
      let obj = {};
      obj = this.ReasonList.find(item => {
        return item.dictKey === val;
      });
      this.initBindStripeTap(obj.dictValue);
    },

    initBindStripeTap(data) {
      RefundTypeList({
        name: data
      }).then(response => {
        this.RefundTypeList = response.data.data;
      });
    },
    isProductionList() {
      //是否生产
      IsProductionList("").then(response => {
        this.IsProductionList = response.data.data;
      });
    },
    cakeWhere() {
      // ****蛋糕去向
      CakeWhereaboutsList("").then(response => {
        this.cakewherelist = response.data.data;
      });
    },
    handleFilterRefund(times) {
      //退款查询
      this.refundFrom.page = 1;
      if (times) {
        this.refundFrom.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
        this.refundFrom.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
      }
      var time1 = Date.parse(this.refundFrom.workOrderStartTime);
      var time2 = Date.parse(this.refundFrom.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getWorkOrderList();
      }
    },
    acTiveArrStringFun(obj) {
      var arr = [];
      if (obj != null && obj.length != 0) {
        for (var i = 0; i < obj.length; i++) {
          arr.push(obj[i]);
        }
      }
      return arr.toString();
    },
    handlerefundResetForm(item, formName) {
      this.refundVisible = false;
      this.refundCakePrice = "";
      this.refundAdd.sincerityGold = "";
      this.refundAdd.giveCakePrice = "";
      this.refundAdd.giveGiftPrice = "";
      this.cakeCompensatePriceAdd = "";
      this.refundForm.refundCode='';
      this.refundAdd.compensationMethod = "";
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlePictureCardPreview(file) {
      //图片放大
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    handleRefundsubmit(refundAdd, refundAddName) {
      var refundMoneys = "";
      if (refundAdd.refundMode == 1) {
        refundMoneys = refundAdd.refundMoney;
      }
      if (refundAdd.refundMode == 2) {
        var cakePrice = this.cakeCompensatePrice;
        let array1 = [
          refundAdd.sincerityGold * 100,
          cakePrice * 100,
          refundAdd.giveGiftPrice * 100,
          refundAdd.giveCakePrice * 100
        ];
        const reducer = (accumulator, currentValue) =>
          accumulator + currentValue;
        if (refundAdd.compensationMethod == 1) {
          refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
        } else if (refundAdd.compensationMethod == 2) {
          refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
        } else {
          refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
        }
      }
      this.$refs[refundAddName].validate(valid => {
        if (valid) {
          if (this.orderDetailIds.length == 0) {
            this.$message({
              message: "请选择需要退款的商品",
              type: "warning"
            });
            return false;
          } else {
            const refundAddData = {
              xmbzNo: this.refundAdd.xmbzNo,
              platformNo: this.refundAdd.platformNo,
              selectOrderDetailIds: this.orderDetailIds, //选中的订单明细id的集合
              noSelectOrderDetailIds: this.selectArray, //初始未选择的订单明细id的集合
              isProduction: this.refundAdd.isProduction, //是否生产
              cakeWhereabouts: this.refundAdd.cakeWhereabouts, // 蛋糕去向
              refundGrade: this.refundAdd.refundGrade, //退款等级
              refundReason: this.refundAdd.refundReason, //退款原因
              refundType: this.refundAdd.refundType, //退款类型
              refundMode: this.refundAdd.refundMode, //退款方式
              refundMoney: this.refundCakePrice, // 退款金额
              compensationMethod: this.refundAdd.compensationMethod, //赔偿方式
              sincerityGold: this.refundAdd.sincerityGold, //诚意金
              cakeCompensatePrice: this.cakeCompensatePriceAdd, //赠送的蛋糕价格
              giveCakePrice: this.refundAdd.giveCakePrice,
              giveGiftPrice: this.refundAdd.giveGiftPrice,
              applyReason: this.refundAdd.applyReason, //申请原因
              store: this.refundAdd.store, //门店
              refundCode: this.refundAdd.refundCode, //退款二维码
              channelTypeId: this.AddchannelTypeidTypes,
              channelId: this.refundAdd.channel
            };
            AddRefund(refundAddData).then(() => {
              this.$message({
                type: "success",
                message: "提交成功!"
              });
              this.refundVisible = false;
              this.$refs[refundAddName].resetFields();
              this.getWorkOrderList();
              this.shoplist = [];
              this.refundAdd.refundReason = "";
              this.refundAdd.refundMoney = "";
              this.refundForm.refundCode='';
              this.orderDetailIds = [];
              this.issearchData = false;
            });
          }
        } else {
          this.$message({
            type: "warning",
            message: "填写相关提交内容!"
          });
          return false;
        }
      });
    },
    handleAddRefund() {
      this.refundVisible = true;
      this.refundAdd.refundCode=''
      this.refundGradeListAdd();
    },

    handlerLogrefund(item) {
      //日志
      this.reverse = false;
      this.LogFormVisible = true;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },

    handlerSaveRefund(item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var refundMoneys = "";
          if (item.refundMode == 1) {
            refundMoneys = item.refundMoney;
          }
          if (item.refundMode == 2) {
            var cakePrice = this.cakeCompensatePrice;
            let array1 = [
              item.sincerityGold * 100,
              cakePrice * 100,
              item.giveGiftPrice * 100,
              item.giveCakePrice * 100
            ];
            const reducer = (accumulator, currentValue) =>
              accumulator + currentValue;
            if (item.compensationMethod == 1) {
              refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
            } else if (item.compensationMethod == 2) {
              refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
            } else {
              refundMoneys = (array1.reduce(reducer) / 100).toFixed(2); //退款金额
            }
          }
          if (this.refundTypeNames == "") {
            this.$message({
              type: "warning",
              message: "退款类型类型不能为空!"
            });
            return false;
          } else if (item.applyReason == "") {
            this.$message({
              type: "warning",
              message: "申请原因不能为空!"
            });
            return false;
          } else if (refundMoneys == "") {
            this.$message({
              type: "warning",
              message: "退款金额不能为空!"
            });
            return false;
          } else if (item.store == "") {
            this.$message({
              type: "warning",
              message: "门店不能为空!"
            });
            return false;
          } else {
            const Saverefund = {
              id: item.id,
              orderId: item.orderId,
              refundReason:
                this.refundReasonIds == ""
                  ? item.refundReason
                  : this.refundReasonIds, //退款原因
              refundType:
                this.refundTypeIds == "" ? item.refundType : this.refundTypeIds, // 退款类型
              refundGrade:
                this.refundGradeIds == ""
                  ? item.refundGrade
                  : this.refundGradeIds, // 退款等级
              cakeWhereabouts:
                this.cakeWhereIds == ""
                  ? item.cakeWhereabouts
                  : this.cakeWhereIds,
              refundMode: item.refundMode, // 退款方式
              refundMoney: refundMoneys, //退款金额
              compensationMethod: item.compensationMethod, //赔偿方式
              sincerityGold: item.sincerityGold, //诚意金
              cakeCompensatePrice: this.cakeCompensatePrice, //蛋糕金额
              giveCakePrice: item.giveCakePrice, //赠送的蛋糕价格
              giveGiftPrice: item.giveGiftPrice, //赠送的礼品价格
              applyReason: item.applyReason, //申请原
              store: item.store,
              refundCode:
                this.refundFromEdit.refundCode == ""
                  ? item.refundCode
                  : this.refundFromEdit.refundCode
            };
            // 退款详情保存
            this.$confirm("确定修改好该退款工单信息了吗？, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderRefund(Saverefund).then(() => {
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                  this.getWorkOrderList();
                  this.EditRefundeditShow = false;
                  this.EditRefundOther = true;
                  this.refundStatus = "create";
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                });
              });
          }
        }
      });
    },

    handlerSaveRefunds() {
      this.$notify({
        title: "警告",
        message: "该操作需点编辑按钮，才可保存",
        type: "warning"
      });
    },
    handleRefund(row, index, formName) {
      //// 跳转详情
      console.log(row, index);
      this.refundStatus = "update";
      this.refundStatushow = "create";
      this.refundFromEdit = row;
      this.cakeCompensatePrice = row.cakeCompensatePrice;
      this.refundFromShow = [];
      this.refundlistindex = index;
      this.EditRefundShow = true;
      this.EditRefundeditShow = false;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    headlecompensationMethod(item, goodsPrice) {
      if (item == 1) {
        this.cakeCompensatePrice = goodsPrice;
      } else if (item == 2) {
        this.cakeCompensatePrice = goodsPrice / 2;
      } else if (item == 6) {
        this.cakeCompensatePrice = 0;
      }
    },
    headleAddMethod(item, goodsPrice) {
      if (item == "1") {
        if (goodsPrice) {
          this.cakeCompensatePriceAdd = goodsPrice;
        } else {
          this.cakeCompensatePriceAdd = 0;
        }
      } else if (item == "2") {
        if (goodsPrice) {
          this.cakeCompensatePriceAdd = goodsPrice / 2;
        } else {
          this.cakeCompensatePriceAdd = 0;
        }
      } else if (item == "6") {
        this.cakeCompensatePriceAdd = 0;
      }
    },
    handlerEditRefund(row) {
      this.refundFromShow = row;
      this.refundStatushow = "update";
      this.EditRefundShow = false;
      this.EditRefundeditShow = true;
      this.EditRefundOther = false;
      this.refundReasonNames = row.refundReasonName;
      this.refundTypeNames = row.refundTypeName;
      this.refundGradeNames = row.refundGradeName;
      this.cakeWhereNames = row.cakeWhereaboutsName;
    },
    handlerRefundCancel(item, formName) {
      this.refundFromShow = [];
      this.refundStatushow = "create";
      this.EditRefundShow = true;
      this.EditRefundeditShow = false;
      this.EditRefundOther = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handleFinance(item) {
      // 财务驳回
      this.$prompt("请输入驳回原因", "财务驳回", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          getFinancialRejection({
            id: item.id,
            orderId: item.orderId,
            notPassReason: value
          }).then(() => {
            // this.$message({
            //   type: "success",

            //   message: "财务标记已退款成功!"
            // });
            this.$message({
            type: "success",
            message: "驳回原因: " + value
          });
            this.getWorkOrderList();
            this.EditRefundShow = false;
          });

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    handlerApproved(item) {
      //财务标记已退款
      this.$confirm("确定财务标记已退款？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          signWorkOrderRefund({
            id: item.id,
            orderId: item.orderId,
            orderDetailId: item.orderDetailId
          }).then(() => {
            this.$message({
              type: "success",
              message: "财务标记已退款成功!"
            });
            this.getWorkOrderList();
            this.EditRefundeditShow = false;
            this.EditRefundOther = true;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消财务标记已退款"
          });
        });
    },
    // 主图开始上传
    handleAvatarSuccess(response) {
      this.refundAdd.refundCode = response.data;
      // this.refundAdd.refundCode = fileList[0].response
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG 格式 与 png格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
    },
    handleAvatarSuccessupdate(response) {
      this.refundFromEdit.refundCode = response.data;
      // this.refundAdd.refundCode = fileList[0].response
    },

    beforeAvatarUploadupdate(file) {
      //退款二维码上传限制
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG 格式 与 png格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
    },
    //根据ID查询商品
    //退款蛋糕、配件、定制蛋糕数据
    searchGood(item) {
      if (item) {
        getGoodsByxmbzNo({
          xmbzNo: item
        }).then(res => {
          this.shoplist = res.data.data;
          if (res.data.data) {
            this.refundAdd.refundMoney = (
              res.data.data[0].orderTotalPrice / 100
            ).toFixed(2);
            if (res.data.data[0].store) {
              this.refundAdd.store = res.data.data[0].store;
            }
          }
          if (this.shoplist && this.shoplist.length > 0) {
            this.issearchData = true;
            // 退货退款
            let customCakeTypeArray = [];
            this.selectArray = [];
            let cakeArray = [];
            this.shoplist.forEach(item => {
              customCakeTypeArray.push(item.categoryName);
              if (item.categoryName == "蛋糕") {
                this.selectArray.push(item.id);
              }
              if (item.categoryName == "配件") {
                this.selectArray.push(item.id);
              }
              if (item.categoryName == "定制蛋糕") {
                this.selectArray.push(item.id);
              }
              if (
                item.categoryName !== "配件" &&
                item.categoryName !== "蛋糕" &&
                item.categoryName !== "服务费" &&
                item.categoryName !== "定制蛋糕"
              ) {
                cakeArray.push(false);
              }
            });
            if (customCakeTypeArray.indexOf("配件") > -1) {
              this.partsFlag = true;
            }
            if (customCakeTypeArray.indexOf("定制蛋糕") > -1) {
              this.customCakeFlag = true;
            }
            if (customCakeTypeArray.indexOf("蛋糕") > -1) {
              this.refundCakeFlag = true;
            }
          } else {
            this.issearchData = false;
          }
        });
      } else {
        this.$message.error("请输入后台单号!");
      }
    },
      handleCloserefunds(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handlerefundResetForm();
          done();
        })
        .catch(() => {});
    },
    // 退款模块获取蛋糕价格
    getTotalprice(value) {
      this.getrefundAmount(value);
    },
    // 获取退款不同商品类型的蛋糕的价格
    getrefundAmount(value) {
      var arrlist = [];
      arrlist.push(value);
      if (value.length == 0) {
        let cakePrice = [];
        let cakeSumPrice = 0;
        this.refundCakePrice = "";
        this.refundForm.refundMoney = "";
      } else {
        let cakePrice = [];
        let cakeSumPrice = 0;
        const reducer = (accumulator, currentValue) =>
          accumulator + currentValue;
        this.shoplist.map(parent => {
          value.map((item, valueindex) => {
            if (item == parent.id) {
              cakePrice.push(parent.totalPrice);
            }
          });
        });
        cakeSumPrice = cakePrice.reduce(reducer); //退款金额
        this.refundCakePrice = (cakeSumPrice / 100).toFixed(2);
        this.refundAdd.refundMoney = (cakeSumPrice / 100).toFixed(2);
      }
    }
  }
};
</script>


<style lang='scss'>
.el-form-item {
  margin-bottom: 22px !important;
}

.radio {
  margin-bottom: 15px;
}

.buttontips {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

.compensationMethods {
  padding-left: 60px;

  .el-form-item__label {
    text-align: left;
  }
}

.app-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;

  .refundCode {
    width: 40px;
    height: 40px;
    text-align: middle;
  }

  .filter_container {
    display: block !important;

    .el-form-item {
      margin-bottom: 22px !important;
    }

    .demo-form-inline {
      display: block !important;
    }
  }

  .refundsmain {
    .el-form-item {
      margin-bottom: 22px !important;
    }

    /*  .el-form-item__label:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      } */
  }

  p {
    margin: 0;
    padding: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }

  .refund {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .refundmain {
      width: 65%;
      height: 930px;
      overflow-y: scroll;

      .refund_list {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        color: #303133;
        transition: 0.3s;
        position: relative;
        margin-bottom: 10px;

        .nodata {
          text-align: center;
          color: #909399;
          line-height: 100px;
        }

        .credittype {
          .tips {
            text-align: center;
            margin: auto;
            position: absolute;
            display: inline-block;
            width: 50px;
            right: 0;
            top: -50px;
            color: #fff;
            transform-origin: bottom center;
            transform: rotate(45deg);
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }

        .credittype.yb {
          width: 0;
          height: 0;
          float: right;
          font-size: xx-small;
          border-top: 60px solid #ffbc00;
          border-left: 60px solid transparent;
          position: relative;
        }

        .credittype.zd {
          width: 0;
          height: 0;
          float: right;
          font-size: xx-small;
          border-top: 60px solid #f77b02;
          border-left: 60px solid transparent;
          position: relative;
        }

        .credittype.jj {
          width: 0;
          height: 0;
          float: right;
          font-size: xx-small;
          border-top: 60px solid #fd5a5a;
          border-left: 60px solid transparent;
          position: relative;
        }

        .credittype.warning {
          width: 0;
          height: 0;
          float: right;
          font-size: xx-small;
          border-top: 60px solid #ff0000;
          border-left: 60px solid transparent;
          position: relative;
        }

        .imgurl {
          width: 30px;
          height: 30px;
          vertical-align: middle;
          position: absolute;
          top: 10%;
          right: 10px;
        }

        .grade {
          background-color: #f56c6c;
          border-radius: 10px;
          color: #fff;
          display: inline-block;
          font-size: 12px;
          height: 18px;
          line-height: 18px;
          padding: 0 6px;
          text-align: center;
          white-space: nowrap;
          border: 1px solid #fff;
          font-style: normal;
        }

        .order-num {
          display: inline-block;
          position: relative;
          margin-top: 10px;
          line-height: 32px;
          background: #585a6e;
          color: #fff;
          text-align: center;
          margin-right: 18px;

          span {
            position: relative;
            z-index: 9;
            font-size: 20px;
          }

          i {
            display: block;
            position: absolute;
            right: -9px;
            top: 7px;
            width: 18px;
            height: 19px;
            background: #585a6e;
            -webkit-transform: rotate(55deg) skewX(25deg);
            transform: rotate(55deg) skewX(25deg);
            z-index: 0;
          }
        }

        .line {
          padding: 0 10px;
          line-height: 40px;

          color: #606266 !important;
          font-weight: 400 !important;

          p {
            display: flex;
            padding: 0;
            margin: 0;
          }

          em {
            font-style: normal;
            padding: 0 5px;
          }
        }

        .refund_lists {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;

          .line {
            padding: 0 5px;
            line-height: 40px;
            color: #606266 !important;
            font-weight: 400 !important;

            p {
              display: flex;
              padding: 0;
              margin: 0;
            }

            em {
              font-style: normal;
              padding: 0 5px;
            }
          }
        }
      }
    }

    .refund_con {
      width: 30%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: 0.3s;
      padding: 10px;
      margin-bottom: 10px;

      // height: 600px;
      .el-form-item {
        margin-bottom: 22px !important;
      }

      &.Nodata {
        height: 100px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
